<template>
	<!--余额充值-->
	<view>
		<view class="uni_header">
			<view class="padding-lg text-white text-df">请绑定持卡本人充电卡</view>
		</view>
		<view class="operating_box" style="margin-top:-40rpx;padding-top:10rpx;">
			<view class="cu-form-group">
				<view class="title">电卡卡号</view>
				<input placeholder="请输入电卡卡号" @input="getcard" v-model="card" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号</view>
				<input placeholder="请输入手机号" @input="getsjhm" name="input" maxlength="11"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">验证码</view>
				<input placeholder="请输入验证码" @input="getyzm" name="input"></input>
				<button type="button" @tap="getyzmbtn" :disabled="disabled" v-bind:class="{'default':test}" class='cu-btn bg-green shadow'>{{btnTitle}}</button>
			</view>
		</view>
		<view class="foot">
		   <button type="button" class="cu-btn block bg-blue lg" @tap="bangd()">确认绑定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				card:'',
				sjhm:'',
				yzm:'',
				disabled: false,
				btnTitle:'获取验证码',
				test:true,
			}
		},
		onLoad(options) {
			// this.card=options.no;
		},
		methods: {
			getcard(e){
				this.card = e.detail.value;
			},
			getsjhm(e){
				this.sjhm = e.detail.value;
			},	
			getyzm(e){
				this.yzm = e.detail.value;
			},	
			//获取验证码
			getyzmbtn(){
				let that=this;
				if(this.sjhm==null || this.sjhm==''){
					 uni.showToast({
						 icon: 'none',
						 title: '手机号码不能为空'
					 });
					 return;
				}
				that.http.tokenreq({
					url: 'card/v1/sendcode',
					data: {
						"phone_number":that.sjhm
					}
				}).then((res) => {
					let e=res.data;
					if(e.code==0 && e.success){
					   uni.showToast({
					   	icon: 'none',
					   	title: e.message
					   });
					   this.test = false;
					   let time = 60;
					   let timer = setInterval(()=>{
					   	this.btnTitle = time + "秒后重试";
					   	this.disabled = true;
					   	time--;
					   	if (time == -1) {
					   		clearInterval(timer);
					   		this.btnTitle = "获取验证码";
					   		this.disabled = false;
					   	}
					   },1000);
					}else{
						uni.showToast({
							icon: 'none',
							title: e.message
						});
					}
				})
				
			},
			bangd(){
				 if(this.card==null || this.card==''){
					 uni.showToast({
						 icon: 'none',
						 title: '卡号不能为空'
					 });
					 return;
				 }
				 if(this.sjhm==null || this.sjhm==''){
					 uni.showToast({
						 icon: 'none',
						 title: '手机号码不能为空'
					 });
					 return;
				 }
				 if(this.yzm==null || this.yzm==''){
					 uni.showToast({
						 icon: 'none',
						 title: '验证码不能为空'
					 });
					 return;
				 }
				 let that=this;
				 that.http.tokenreq({
				 	url: 'card/v1/cardrecharge',
				 	data: {
				       "captcha":that.yzm,
					   "card_no":that.card,
					   "phone_number":that.sjhm
				 	}
				 }).then((res) => {
				 	let e=res.data;
				 	if(e.code==0 && e.success){
				 	   uni.showToast({
							icon: 'none',
							title: e.message
						   });
				 	}else{
						uni.showToast({
							icon: 'none',
							title: e.message
						});
					}
				 })
			}
		}
	}
</script>

<style>
	uni-view {
	    font-size: 14px;
	    line-height:1.5;
	}
	.uni_header{
		height:150rpx;
	}
    .cu-btn{
		padding:40rpx 40rpx; 
	}
	/* .inpys{
		border:2rpx solid #F1F1F1;
		text-align: left;
		padding:40rpx 0rpx;
	} */
	.uni-input-input{
		border:2rpx solid #F1F1F1;
		text-align: left;
		padding:20rpx 10rpx;
	}
	.foot{
		position: fixed;
		left: 0;
		bottom: 0;
		width:100%;
	}
	.txzys{
		background-color:#0081FF;
		color: white;
	}
</style>
